<template>
	<view class="index-content">
		<TopBar v-if="!swiperdata.out_url" :indexflag="true" :combakflag="true" :lang="false" :bottom="true" title="Sinchay"
			:barstyle="colortopic()">
		</TopBar>
		<view class="swiper-content">
			<view class="title" v-if="!swiperdata.out_url" >{{swiperdata.title}}</view>
			<view class="rich-text" v-if="swiperdata.content">
				<rich-text :nodes="swiperdata.content"></rich-text>
			</view>
			<view class="long-image" v-if="swiperdata.long_img">
				<image @load="imageLoad" :src="swiperdata.long_img" mode="widthFix"></image>
			</view>
			<view class="" v-if="swiperdata.out_url">
				<web-view :src="swiperdata.out_url"></web-view>
			</view>
		</view>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import {
		getswiperone
	} from '@/api/all.js';
	export default {
		components: {
			TopBar,
		},
		data() {
			return {
				loadshow: false,
				swiperdata: ''
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getSwipers(e.id);
			}
		},
		methods: {
			//获取轮播图
			getSwipers(id) {
				let that = this;
				getswiperone({
					id: id
				}).then(res => {
					if (res.code == 200) {
						that.swiperdata = res.body.data;
						// console.log(res,'++++++++++++')
					}
				})
			},
			//点击轮播图
			changeSwiper(id) {
				uni.navigateTo({
					url: '/pages/index/swipercontent?id=' + id
				})
			},
			//点击商铺
			changeshop(id) {
				uni.navigateTo({
					url: '/pages/index/index?shop_id=' + id
				})
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s = 2 * Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(La3 / 2), 2) +
						Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
					)
				)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.swiper-content {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 38rpx;
				color: #000;
				padding: 30rpx;
				box-sizing: border-box;
				text-align: center;
			}

			.rich-text {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.long-image {
				width: 100%;
				image {
					width: 100%;
				}
			}
		}
	}
</style>